<template>
    <div :class="{'dark':state == 'dark'}" :style="{float:'left', width: '100%', height: '95%'}">
        <div class="echart" id="waveChart" :style="{float:'left', width: '75%', height: '100%'}"></div>
        <pui-color-picker class="selectColor" @changeColor="selectColor"></pui-color-picker>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted} from 'vue'
import * as echarts from 'echarts'
import jsPDF from 'jspdf';
import { listeners, nextTick } from 'process';
import getMyMixin from './myMixin';
export default defineComponent({
name: 'WaveForm',
setup(props, ctx) {
    onMounted(() => {
        initEcharts();
    });
    const dcolor = ref('#569ff8')
    const state = ref('')
    let url = ''
    var option = {} as any
    const Mixin = getMyMixin("")
    const initEcharts = async () => {
        const myChart = echarts.init(document.getElementById("waveChart") as HTMLElement);
        option = {
            xAxis: {
                type: 'category',
                // data: ['0', '100', '200', '300', '400', '500', '600','700','800'],
                splitLine:{
                    show:true
                },
                axisTick: {
                    alignWithLabel: true, // 刻度线和标签对齐。
                },
                axisLine: {
                    onZero: false,    //有负数x轴下落至y轴最小值
                },
                boundaryGap: false // 两侧不留白
            },
            yAxis: {
                type: 'value',
                axisLine:{
                    show: true,
                    onZero: false,
                },
                splitLine:{
                    show:true //显示网格线
                },
                boundaryGap: ['3%','3%'] // 两侧留白
            },
            series: [],
            toolbox: {
                right: 10,
                feature: {
                    dataZoom: {
                        show:true,
                    }
                }
            },
            tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                trigger: 'axis',
                backgroundColor: 'rgba(32, 33, 36,.7)',
                showContent:true, //显示数据值
                borderColor: 'rgba(32, 33, 36,0.20)',
                borderWidth: 1,
                textStyle: { // 文字提示样式
                    color: '#fff',
                    fontSize: '12'
                },
                axisPointer: { // 坐标轴虚线
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                },
            },  
        }; 
        let dataTest = readFile('./waveForm.csv')
        var lines = dataTest.split("\r\n")
        let temp: any[] = []
        for(var i = 0; i< lines.length; i++){
            let snsArr=lines[i].split(',');
            if(snsArr.length == 2){
                temp.push(snsArr)
            }
        }
        option.series.push(
            {    
                name: 'Step Start',
                type: 'line',
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:0.8
                        }
                    }
                },
                step: 'start',
                symbol: "none",   //去除坐标小圆点
                data: temp,
                color: dcolor.value
            }
        )
        myChart.clear();
        myChart.setOption(option,true);
        myChart.resize()
        myChart.dispatchAction({
            type:'takeGlobalCursor',
            key:'dataZoomSelect',
            dataZoomSelectActive:true
        })
        window.addEventListener("resize", function () {
            myChart.resize();
        });
        url = getImgUrl()
    }
    const changeState = (val: any) => {
        state.value = val
    }
    const selectColor = (value:any) =>{
        dcolor.value = value
        initEcharts()
    }
    const readFile = (filePath: any) => {
        let result = ""
        var xhr = new XMLHttpRequest();
        xhr.open("GET",filePath,false)
        xhr.onload = function (e) {
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    result = xhr.responseText
                } else {
                    console.error(xhr.statusText)
                }
            }
        };
        xhr.send(null)
        return result
    }
    const saveCSV = () => {
        let content = dataToCSV()
        Mixin.saveCSV("waveForm",content)
    }
    const dataToCSV = () => {
        let csv = '';
        for(let i in option.series[0].data){
            csv += option.series[0].data[i][0] + ',';
            csv += option.series[0].data[i][1] + '\r\n';
        }
        let content = new Blob(['\uFEFF' + csv]);
        return content;
    }
    const getImgUrl = () => {
        let url =  Mixin.getImgUrl("waveChart")
        return url
    }
    const saveimg = () => {
        nextTick(() => {
            Mixin.saveImg('waveForm',url)
        })
    }
    const savePDF = () => {
        nextTick(() => {
            var doc = new jsPDF('l', 'pt', 'letter')
            doc.addImage(url, 100, 5, 590, 590, 'img')
            doc.save('waveForm')
        })
    }
    const reload = () => {
        const myChart = echarts.init(document.getElementById("waveChart") as HTMLElement);
        myChart.resize()
    }
    return {
        saveCSV,
        dataToCSV,
        getImgUrl,
        saveimg,
        savePDF,
        selectColor,
        initEcharts,
        reload,
        changeState,
        dcolor,
        state
    }  
}
})
</script>

<style lang="scss" scoped>
.echart{
text-align: center;
margin:auto;
// position:absolute;
// padding-right: 20%;
// padding-top: 10%;
padding-left: 10%;
top:0;
left: 0;
right:0;
bottom: 0;
}
.selectColor{
float: left;
}
.dark{
    background-color: black;
}
</style>